<template>
  <div class="block">
    <div class="block-custom history-alarm">
      <!-- <div class="littleTitle">报警信息查询</div> -->
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="history-alarm-tab">
        <el-tab-pane label="历史报警" name="first">
          <div style="margin-top: 10px; margin-left: 10px">
            <label class="label-text">站场名称</label>
            <el-select v-model="alarmInfo.stationName" placeholder="请选择" clearable style="width: 200px" class="filter-item">
              <el-option v-for="item in stationNameOptions" :key="item" :label="item" :value="item" />
            </el-select>
            <label class="label-text">报警类型</label>
            <el-select v-model="alarmInfo.alertStation" placeholder="请选择" clearable multiple style="width: 200px" class="filter-item" @change="handleCheckboxChange">
              <el-option v-for="item in shuntingAlertOptions" :key="item.value" :label="item.description" :value="item.value">
                <!-- <el-checkbox
                  v-model="checkedOptions"
                  :label="item.value"
                  @change="handleCheckboxChange(item.value)"
                >
                  {{ item.description }}
                </el-checkbox> -->
              </el-option>
            </el-select>
            <label class="label-text">机车号</label>
            <el-input v-model.trim="alarmInfo.trainNo" placeholder="请输入" style="width: 180px" class="filter-item" />

            <label class="label-text">报警时间</label>
            <el-date-picker v-model="alarmInfo.startTime" type="datetime" style="width: 200px" placeholder="选择日期时间" />

            <label class="label-text">结束时间</label>
            <el-date-picker v-model="alarmInfo.endTime" type="datetime" style="width: 200px" placeholder="选择日期时间" />

            <el-button @click="reset"> 重置 </el-button>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">
              查询
            </el-button>
          </div>

          <el-table :key="tableKey" ref="refsTable" v-loading="listLoading" :data="rcvTableData" border fit highlight-current-row style="width: 100%">
            <el-table-column label="站场名称" width="250" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.stationName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="机车号" width="220" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.trainNo }}</span>
              </template>
            </el-table-column>
            <el-table-column label="报警时间" align="center" width="300">
              <template slot-scope="{ row }">
                <span>{{ row.happenTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="报警类型" width="300" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.alarmType }}</span>
              </template>
            </el-table-column>
            <el-table-column label="报警内容" width="300" align="center">
              <template slot-scope="{ row }">
                <span>{{ row.alarmContent }}</span>
              </template>
            </el-table-column>
            <el-table-column label="级别" align="center" width="200">
              <template slot-scope="{ row }">
                <span>{{ row.alarmLevel }}</span>
              </template>
            </el-table-column>
          </el-table>

          <el-pagination background layout="total, sizes, prev, pager, next" :page-size="pageSize" :page-sizes="[10, 50, 100, 200, 500]" :total="totalDataLength" :current-page="currentPage" align="center" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </el-tab-pane>
        <el-tab-pane label="报警管理" name="second">
          <div class="alarm-manger">
            <div style="margin-top: 10px; margin-left: 10px">
              <el-select v-model="alarmManageStation" placeholder="请选择站场名称" clearable style="width: 200px" class="filter-item">
                <el-option v-for="item in stationOption" :key="item" :label="item.stationName" :value="item.stationNum" />
              </el-select>

              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchAlarmMange">
                查询
              </el-button>
            </div>
            <el-table :data="alarmManageData" height="600">
              <el-table-column label="描述" prop="description" align="center"> </el-table-column>
              <el-table-column label="是否发给前端" prop="isSendToFront" align="center">
                <template slot-scope="scope">
                  {{ scope.row.isSendToFront ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column label="是否发给手持" prop="isSendToHandPoint" align="center">
                <template slot-scope="scope">
                  {{ scope.row.isSendToHandPoint ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column label="是否发给机车" prop="isSendToTrain" align="center">
                <template slot-scope="scope">
                  {{ scope.row.isSendToTrain ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="text" @click="modifyAlarm(scope.row)">修改</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-dialog :visible.sync="modifyAlarmManageShow">
            <el-form :model="modifyAlarmInfo" ref="modifyAlarmInfo" :rules="rules">
              <el-form-item label="描述" label-width="120px" prop="description">
                <el-input v-model="modifyAlarmInfo.description" disabled readonly="true" />
              </el-form-item>
              <el-form-item label="是否发给前端" label-width="120px" prop="isSendToFront">
                <el-radio-group v-model="modifyAlarmInfo.isSendToFront">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="是否发给手持" label-width="120px" prop="isSendToHandPoint">
                <el-radio-group v-model="modifyAlarmInfo.isSendToHandPoint">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="是否发给机车" label-width="120px" prop="isSendToTrain">
                <el-radio-group v-model="modifyAlarmInfo.isSendToTrain">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button @click="modifyAlarmManageShow = false">取 消</el-button>
                <el-button type="primary" @click="postModifyAlarm">确 定</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </el-tab-pane>
      </el-tabs>
      <!-- <div class="block block-custom">
        <echart :xAxis="xAxis" :rcvTableData="rcvTableData"></echart>
      </div> -->
    </div>
  </div>
</template>

<script>
import script from './script'

export default script
</script>

<style lang="scss" scoped>
@import './style.scss';
// @import './index.scss';
</style>
